<template>
	<view class="ventor-list">
		<view class="ventor-list-content">
			<uni-search-bar :focus="true" v-model="searchValue" @confirm="search" @input="search" @clear="clear"
				cancelButton="none">
			</uni-search-bar>
			<view class="custom-uni-list">
				<radio-group @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in dataList" :key="item.id">
						<view>
							<radio :value="item.id" :checked="selectId === item.id" style="transform:scale(0.7)"
								:color="'#007aff'" />
						</view>
						<view class="uni-list-cell__name">{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="form-page-footer flex">
				<view class="form-page-footer-btngroup flex">
					<view class="form-page-footer-btn primary" @click="selectConfig()">
						<text>确定</text>
					</view>
					<view class="form-page-footer-btn" @click="reBack()">
						<text>取消</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				dataList: [],
				allDataList: [],
				searchValue: '',
				storeId: '',
				selectId: 0,
				selectData: {},
				pageNum: 1,
				pageSize: 1,

			}
		},

		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
			appConfig() {
				return getApp().globalData.config
			}
		},

		onLoad: function(event) {
			if (event.value) {
				this.selectId = event.value;
			}
			// 查询信息
			this.queryList();
		},

		methods: {
			queryList() {
				let params = {
					"name": this.searchValue,
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
				};
				this.$api.storeSearch(params).then(result => {
					if (!result) {
						return;
					}
					this.dataList = [];
					this.allDataList = result;
					this.dataList = this.allDataList;
					for (let i = 0; i < this.dataList.length; i++) {
						if (this.dataList[i].id == this.selectId) {
							this.selectData = this.dataList[i];
							break;
						}
					}
				}).catch(res => {

				})
			},


			search() {

				if (!this.searchValue) {
					this.dataList = this.allDataList;
					return;
				}
				this.queryList();
			},

			clear() {
				this.searchValue = null;
				if (!this.searchValue) {
					this.dataList = this.allDataList;
					return;
				}
				this.search();
			},

			showError(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},

			selectConfig() {
				if (!this.selectData) {
					uni.showToast({
						title: "没有选择门店",
						duration: 2000
					});
				}
				// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
				let pages = getCurrentPages();
				// 2. 上一页面实例
				// 注意是length长度，所以要想得到上一页面的实例需要 -2
				// 若要返回上上页面的实例就 -3，以此类推
				let prevPage = pages[pages.length - 2];
				// 3. 给上一页面实例绑定selectVentor()方法和参数（注意是$vm）
				prevPage.$vm.selectConfig(this.selectData);
				// 4. 返回上一页面
				uni.navigateBack({
					delta: 1 // 返回的页面数
				});
			},


			reBack() {
				uni.navigateBack({
					delta: 1,
				});
			},

			radioChange: function(evt) {
				for (let i = 0; i < this.dataList.length; i++) {
					if (this.dataList[i].id == evt.detail.value) {
						this.selectData = this.dataList[i];
						this.selectId = this.dataList[i].id;
						break;
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ventor-list {
		.custom-uni-list {
			margin: 0 10px;
			background-color: #FFFFFF;
		}

		.ventor-list-content {
			padding-bottom: 50px;
		}

		.choose-tab {
			position: absolute;
			width: 25%;
			line-height: 90rpx;
			text-align: center;
			min-height: 100%;
			background-color: #f7f8fa;
		}

		.choose-item {
			background-color: #f7f8fa;
			color: #868789;
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: normal;

			&__line {
				width: 4px;
				height: 36px;
			}

			&__line-select {
				width: 4px;
				height: 36px;
				background-color: #2979ff;
			}

			&__text {
				display: flex;
				flex-direction: column;
				flex: 1;
			}

			&__text-select {
				display: flex;
				flex-direction: column;
				flex: 1;
				color: #333;
				font: 14px 'microsoft yahei';
			}

		}

		.active {
			background-color: white;
		}

		.content {
			margin-left: 25%;
			padding: 15rpx;
		}

		.footer {
			position: fixed;
			bottom: 5px;
			margin-left: 16px;
			width: 720rpx-30;
			flex-direction: row;
			z-index: 3;

			.footer-btn,
			.footer-btn-primary {
				width: 95%;
				margin-bottom: 10rpx;
				font: 14px 'microsoft yahei';
				height: 40px;
				line-height: 40px;
				border-radius: 25px;
			}

			.footer-btn {
				border: 1px solid #DCDFE6;
				color: #666666;

			}

			.footer-btn-primary {
				border: 1px solid #2979ff;
				background-color: #2979ff;
			}
		}

		.uni-list-cell {
			justify-content: flex-start;

			&__name {
				font: 14px 'microsoft yahei';
			}
		}

		.uni-list-cell-pd {
			padding: 18rpx 30rpx;
		}
	}
</style>
<style lang="scss" scoped>
	@import url("../../common/css/custom-footer-btn.css");
</style>